import React from 'react'
import styles from '../css2/Information.module.scss'
import Head from '../component/Head'
import { MyIcon } from '../MyIcon/MyIcon'
export default function Information() {
    let obj=JSON.parse(sessionStorage.user)
    return (
        <div style={{ height: '100vh', backgroundColor: '#F2F2F2' }}>
            <Head titleName='编辑资料'></Head>
            <div className={styles.information_box}>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>头像</div>
                    <div className={styles.ele_right}>
                        <img className={styles.user_img} src={obj.avatar} alt='' />
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>用户名</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>{obj.username}</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>签名</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>与你分享我的观点,weibo:Alex Wang</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
            </div>
            <div className={styles.information_box}>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>性别</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>女</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>地区</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>河北 保定</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
            </div>
            <div className={styles.information_box}>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>QQ</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>1195226</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>微信</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>Alex Wang</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.ele}>
                    <div className={styles.ele_left}>微博</div>
                    <div className={styles.ele_right}>
                        <div style={{ fontSize: '14px', color: '#999999' }}>特立独行的猫</div>
                        <MyIcon className={styles.right_icon} type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
            </div>
            <div style={{ marginTop: '15px', height: '150px', backgroundColor: 'white', padding: '0 20px' }}>
                <h2 style={{ height: '60px', lineHeight: '50px' }}>关注领域</h2>
                <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center' }}>
                    <div style={{ color: 'white', backgroundColor: '#B4CCFE', borderRadius: '5px', width: '80px', height: '40px', textAlign: 'center', lineHeight: '40px', marginRight: '6px' }}>科技</div>
                    <div style={{ color: 'white', backgroundColor: '#B4CCFE', borderRadius: '5px', width: '80px', height: '40px', textAlign: 'center', lineHeight: '40px', marginRight: '6px' }}>娱乐</div>
                    <div style={{ color: 'white', backgroundColor: '#B4CCFE', borderRadius: '5px', width: '80px', height: '40px', textAlign: 'center', lineHeight: '40px', marginRight: '6px' }}>媒体</div>
                    <div style={{ color: 'white', backgroundColor: '#3E7CFC', borderRadius: '5px', width: '80px', height: '40px', textAlign: 'center', lineHeight: '40px', marginRight: '6px' }}>+添加</div>
                </div>
            </div>
        </div>
    )
}
